<template>
  <div class="app-container">
       <el-form ref="form" :model="form" label-width="150px">
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="用户名称" prop="doctorName">
               <el-input
                 v-model="form.doctorName"
                 placeholder="请输入用户名称"
                 maxlength="30"
               />
             </el-form-item>
           </el-col>
         </el-row>

         <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="是否修改密码" prop="password">
             <el-switch
               v-model="updateFlagButton"
               active-value= "0"
               inactive-value="1"
               @change="updateFlagButton === 0?1:0"
             />
           </el-form-item>

           <el-form-item v-if="updateFlagButton == 0" label="账号密码" prop="password">
             <el-input
               v-model="form.password"
               placeholder="请输入密码"
               maxlength="30"
             />
           </el-form-item>
         </el-col>
         </el-row>
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="校医室" prop="title">
             <el-select
               v-model="form.departmentId"
               placeholder="校医室名称"
               clearable
               size="small"
               style="width: 240px"
             >
               <el-option v-for="(item,index) in departmentList" :key="item.id" :label="item.departmentName" :value="item.id"/>
             </el-select>
             </el-form-item>
           </el-col>
         </el-row>

         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="用户邮箱" prop="email">
               <el-input
                 v-model="form.email"
                 placeholder="请输入用户邮箱"
                 maxlength="30"
               />
             </el-form-item>
           </el-col>
         </el-row>

         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="简介" prop="title">
               <el-input
                 v-model="form.introduction"
                 placeholder="请输入用户简介"
                 maxlength="30"
               />
             </el-form-item>
           </el-col>
         </el-row>

         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="性别" prop="title">
               <el-select  style="width: 180px" v-model="form.sex" placeholder="请选择">
                 <el-option :key="'0'" label="男" :value="'0'" />
                 <el-option :key="'1'" label="女" :value="'1'" />
               </el-select>
             </el-form-item>
           </el-col>
         </el-row>

         <el-row :gutter="20">
           <el-col :span="12">
           <el-button style="width: 200px; margin-left: 200px"   type="primary" @click="submitForm">确定修改</el-button>
           </el-col>
         </el-row>
       </el-form>
  </div>
</template>

<script>
import {allDepartmentList} from "@/api/department/department";
import { getInfo, updateDoctor} from "@/api/info/doctor";
export default {
  name: "index",
  data() {
    return {
      form: {

      },
      queryDepartmentParams:{
        pageNum: 1,
        pageSize: 999
      },
      updateFlagButton: 0,
      departmentList: null,
      rules: {

        doctorName: [
          {required: true, message: '用户昵称不能为空', trigger: 'blur'},
        ],
        password: [
          { required: true, message: '用户密码不能为空', trigger: 'blur' },
          {
            min: 5,
            max: 20,
            message: '用户密码长度必须介于 5 和 20 之间',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true
      allDepartmentList(this.queryDepartmentParams).then((response) => {
        this.departmentList = response.list
      });
      getInfo().then((response) => {
        this.form = response
      });
    },
    submitForm: function () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id !== undefined) {
            updateDoctor(this.form).then((response) => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.updateFlag = true;
              this.getList();
            })
          }
        }
      })
    },

  }
}
</script>

<style scoped>

</style>
